<template>
    <div id="banner_dialog">
        <el-dialog :title="DialogData.title"  :visible.sync="DialogData.show" width="50%" >
            <div class="form">
                <el-form :model="FormData" label-width="100px" >
                    <el-form-item label="ID" v-if="DialogData.edit && FormData.id">
                        <el-input v-model="FormData.id" disabled ></el-input>
                    </el-form-item>
                    <el-form-item label="分类名称">
                        <el-input v-model="FormData.name"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="状态">
                        <el-select v-model="FormData.status" placeholder="请选择状态">
                            <el-option v-for="item in StatusOptions"  :key="item.value" :value="item.value" :label="item.label">

                            </el-option>
                        </el-select>
                    </el-form-item>

                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="DialogData.show = false">取消</el-button>
                <el-button type="primary" @click="SubForm" >确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                limit: 1,
                // 状态 options
                StatusOptions: [
                    { value: 1, label: "显示" },
                    { value: 2, label: "隐藏" },
                ],
                PositionOptions:[
                    { value: 1, label: "首页" },
                    { value: 2, label: "其他" },
                ],
                
            }
        },
        props: {
            DialogData: Object,
            FormData: Object
        },
        methods: {

            // 检测数据
            CheckData() {
                let { name,  status, id } = this.FormData
                if (!name) {
                    this.$message.error("请输入名称")
                    return false
                }else if(!status) {
                    this.$message.error("请选择状态")
                    return false
                }  else { 
                    return true
                }
            },
            // 上传form
            async SubForm() {
                    let URL = "/admin/addInfoClass"
                    let Checked = this.CheckData()
                    if (!Checked) {
                        return false
                    }
                    let res = await this.$axios.post(URL, this.FormData )
                    let code = res.data.code 
                    if (code == 202 || code == 204) {
                        this.$message.success("更新成功!")
                        this.$emit("update")
                        
                        this.DialogData.show = false
                    } else {
                        this.$message.error("更新失败!")
                        this.$emit("update")
                        
                        this.DialogData.show = false
                    }
                
            },

            
        },
    }
</script>

<style lang="scss" scoped>
    .slt {
        width: 148px;
        height: 148px;
    }
</style>